<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
// 链式编程
// 需求：延时2s秒输出红色，然后再延时1s输出黄色，然后再延时3s输出绿色
// 回调函数的嵌套 ==> 回调地狱 , promise解决 => 终极方案 async/await

// const sleep = (msg, ms) => {
//     return new Promise((resolve) => {
//         setTimeout(() => {
//             resolve(msg)
//         }, ms)
//     })
// }
// sleep('啊哈', 1000) 这个表达式的值是什么 ？ 或者说它返回什么？

    const sleep = (msg, ms) => new Promise(resolve => setTimeout(() => {resolve(msg)}, ms))

    sleep('红色', 2000).then(res => {
        // 1. .then() 中 ，不写return， 相当于then中没有返回值，返回一个成功态的promise，结果是undefined
        // 2. 写了return 并且return的是一个promise对象，就要等这个promise对象状态的的结果，才能进入下一个then的回调中
        console.log(res)
        // resolve()
        return sleep('黄色', 1000)
    }).then(res => {
        console.log(res)
        // resolve()
        return sleep('绿色', 3000)
    }).then(res => {
        console.log(res)
    })

    // async function fn(){
    //     let res1 = await sleep('红色', 2000)
    //     console.log(res1)
    //     let res2 = await sleep('黄色', 1000)
    //     console.log(res2)
    //     let res3 = await sleep('绿色', 3000)
    //     console.log(res3)
    // }
    // fn()

    ;(async () => {
        let res1 = await sleep('红色', 2000)
        console.log(res1)
        let res2 = await sleep('黄色', 1000)
        console.log(res2)
        let res3 = await sleep('绿色', 3000)
        console.log(res3)
    })()
    </script>
</body>
</html>